<template>
<div class="systemNotice">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
      <el-button type="primary" @click="addNotice">添加通知</el-button>
    </template>
    <el-form inline :model="model">
      <el-form-item label="标题:">
        <el-input v-model="model.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="通知类型:">
        <y-code-select
          v-model="model.noticeType"
          clearable
          dict="QX_NOTICE_TYPE"></y-code-select>
      </el-form-item>
      <el-form-item label="发布时间:">
        <el-date-picker
          v-model="model.postTime"
          clearable
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="{
            shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
              }
            }]
          }"></el-date-picker>
      </el-form-item>
<!--      <el-form-item label="生效时间:" >
        <el-date-picker
          v-model="timeVal"
          clearable
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>-->
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns"
  >
    <el-table-column slot="status" label="发布" align="center" header-align="center">
      <template v-slot="scope">
        <el-popconfirm
          :title="scope.row.status === '0' ? '是否确认发布该通知？' : '是否确认取消发布该通知？'"
          @confirm="() => {
            if(scope.row.status === '0') post(scope.row)
            else unPost(scope.row);
          }"
        >
          <el-switch
            disabled
            slot="reference"
            v-model="scope.row.status"
            active-value="1"
            inactive-value="0"></el-switch>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150">
      <template v-slot="scope">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="editNotice(scope.row)">编辑</el-button>
          <el-popconfirm
              title="是否确认删除该通知？"
              @confirm="delNotice(scope.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
      v-model="forms.formModel"
      :visible.sync="forms.showForm"
      :title="forms.formTypeTitle[forms.formsType]"
      destroy-on-close
      width="900px"
      force-inner-scroll
      :form-attrs="forms.formAttrs"
      :columns="forms.formColumns"
      @ensure="ensureModel">
    <template slot="endTime">
      <el-date-picker
        v-model="formTimeVal"
        type="datetimerange"
        clearable
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-ddTHH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </template>
  </y-form>
</div>
</template>

<script>
export default {
  name: "systemNotice",
  inject: ['getDictNameSync'],
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.system.noticeList,
        param: this.model
      }
    },
    timeVal:{
      get(){
        if(this.model.startTime){
          return [this.model.startTime, this.model.endTime];
        }else{
          return '';
        }
      },
      set(val){
        if(Array.isArray(val) && val.length){
          [this.model.startTime, this.model.endTime] = val;
        }else{
          [this.model.startTime, this.model.endTime] = ['', ''];
        }
      }
    },
    formTimeVal:{
      get(){
        if(this.forms.formModel.startTime){
          return [this.forms.formModel.startTime, this.forms.formModel.endTime];
        }else{
          return '';
        }
      },
      set(val){
        if(Array.isArray(val) && val.length){
          [this.forms.formModel.startTime, this.forms.formModel.endTime] = val;
        }else{
          [this.forms.formModel.startTime, this.forms.formModel.endTime] = ['', ''];
        }
      }
    },
  },
  data(){
    return{
      model:{
        postTime: '',
        title: '',
        startTime: '',
        endTime: '',
        noticeType: ''
      },
      columns: [{
        label: "标题",
        prop: "title",
        minWidth: 100,
      },{
        label: "类型",
        prop: "noticeType",
        minWidth: 100,
        formatter: (function(row){
          return this.getDictNameSync(row.noticeType, 'QX_NOTICE_TYPE');
        }).bind(this)
      },{
        label: "生效时间",
        prop: "usedTime",
        minWidth: 310,
        formatter(row){
          if(!row.startTime && !row.endTime) return '';
          return [row.startTime||'', row.endTime||''].map(t => t.replace('T', ' ')).join('~')
        }
      },{
        label: "发布时间",
        prop: "postTime",
        minWidth: 180,
        formatter(row){
          return (row.postTime || '').replace('T', ' ');
        }
      },{
        label: "发布",
        prop: "status",
        minWidth: 80,
        template: true
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加通知',
          'EDIT': '编辑通知'
        },
        formModel:{
          title: '',
          noticeType: '',
          startTime: '',
          endTime: '',
          orderNum: '',
          content: '',
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            title: [{required: true, message: "请输入通知标题", trigger: "blur"}],
            noticeType: [{required: true, message: "请选择通知类型", trigger: "change"}],
            endTime: [{required: true, message: "请选择生效时间", trigger: "change"}],
            content: [{required: true, message: "请输入通知正文", trigger: "change"}]
          }
        },
        formColumns:[
          {
            label: "标题",
            prop: "title",
            comp:{
              compType: 'input',
              attrs:{
                maxlength: 30,
                showWordLimit: true
              }
            }
          },{
            label: "类型",
            prop: "noticeType",
            comp:{
              compType: 'YCodeSelect',
              attrs:{
                dict: 'QX_NOTICE_TYPE'
              }
            }
          },{
            label: "生效时间",
            prop: "endTime",
            template: true
          },{
            label: "排序",
            prop: "orderNum",
            comp:{
              compType: 'input-number',
              attrs:{
                stepStrictly: true
              }
            }
          },{
            label: "通知正文",
            prop: "content",
            comp:{
              compType: 'YRichText'
            }
          }
        ],
      },
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    addNotice(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    editNotice(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      //查询正文
      this.$yAxios({
        url: this.$api.system.queryNoticeDetails,
        data: {
          id: row.id
        },
        loading: true,
      }, info => {
        if(info.content){
          this.forms.formModel.content = info.content.content;
        }
        this.forms.showForm = true;
      })
    },
    delNotice(row){
      this.$yAxios({
        url: this.$api.system.removeNotice,
        data:{
          ids: [row.id]
        }
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    post(row){
      this.$yAxios({
        url: this.$api.system.postNotice,
        data:{
          id: row.id
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: `成功发布通知【${row.title}】`
        });
        this.search()
      });
    },
    unPost(row){
      this.$yAxios({
        url: this.$api.system.unPostNotice,
        data:{
          id: row.id
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: `成功取消发布通知【${row.title}】`
        });
        this.search()
      });
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = Object.assign({}, form);
      }
      this.$yAxios({
        url: this.$api.system.saveNotice,
        data: newForm,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search(this.forms.formsType === 'ADD');
      })
    },
  }
}
</script>

<style scoped lang="less">
/*.systemNotice{
  @media screen and (max-width: 1919px) {
    .SearchBlock{
      /deep/ .el-form-item{
        &:nth-child(2n+1){
          width: 38%;
        }
        &:nth-child(2n){
          width: calc(62% - 20px);
        }
        .el-form-item__content{
          margin-bottom: 10px;
          .el-input__inner{
            min-width: 220px;
          }
          .el-range-editor{
            min-width: 380px;
          }
        }
      }
      /deep/ .search-buttons{
        >.el-button{
          margin: 0 5px 10px;
        }
      }
      &+*{
        margin-top: -10px;
      }
    }
  }
}*/
</style>